<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>多样化广告展示 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f5f5f5;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #333;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: #2c3e50;
      padding: 15px 15px;
      color: white;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 广告容器 */
    .ads-container {
      padding: 10px;
    }
    
    /* 广告通用样式 */
    .ad-item {
      margin-bottom: 15px;
      border-radius: 12px;
      overflow: hidden;
      background-color: white;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    
    .ad-label {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: rgba(255, 87, 34, 0.9);
      color: white;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
      font-weight: 500;
      z-index: 10;
    }
    
    .ad-creator {
      display: flex;
      align-items: center;
      padding: 10px 15px;
      border-bottom: 1px solid #f0f0f0;
    }
    
    .creator-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      margin-right: 10px;
      object-fit: cover;
    }
    
    .creator-info {
      flex: 1;
    }
    
    .creator-name {
      font-size: 14px;
      font-weight: 600;
    }
    
    .creator-verify {
      font-size: 11px;
      color: #999;
    }
    
    .ad-menu {
      color: #999;
      font-size: 18px;
    }
    
    /* 1. 多图网格广告 */
    .ad-multi-grid {
      position: relative;
    }
    
    .grid-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    
    .grid-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
    }
    
    .ad-content {
      padding: 12px 15px;
    }
    
    .ad-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 6px;
      line-height: 1.4;
    }
    
    .ad-desc {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 10px;
    }
    
    .ad-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }
    
    .ad-tag {
      background-color: #f0f7ff;
      color: #2196f3;
      font-size: 12px;
      padding: 2px 8px;
      border-radius: 4px;
    }
    
    .ad-cta {
      display: inline-block;
      background-color: #2196f3;
      color: white;
      padding: 5px 14px;
      border-radius: 5px;
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
    }
    
    /* 2. 大图横幅广告 */
    .ad-banner {
      position: relative;
    }
    
    .banner-image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    .banner-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 20px 15px 15px;
      color: white;
    }
    
    .banner-title {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    .banner-desc {
      font-size: 13px;
      opacity: 0.9;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    /* 3. 左图右文广告 */
    .ad-side-by-side {
      display: flex;
    }
    
    .side-image {
      width: 40%;
      object-fit: cover;
    }
    
    .side-content {
      width: 60%;
      padding: 15px;
      display: flex;
      flex-direction: column;
    }
    
    /* 4. 纯文字广告 */
    .ad-text-only {
      padding: 15px;
    }
    
    .text-highlight {
      color: #e74c3c;
      font-weight: 600;
    }
    
    /* 5. 视频广告 */
    .ad-video {
      position: relative;
    }
    
    .video-placeholder {
      width: 100%;
      aspect-ratio: 16/9;
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .play-button {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #e74c3c;
      font-size: 20px;
    }
    
    .video-duration {
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: rgba(0,0,0,0.7);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px;
    }
    
    /* 6. 轮播广告 */
    .ad-carousel {
      position: relative;
      overflow: hidden;
    }
    
    .carousel-track {
      display: flex;
      transition: transform 0.5s ease;
    }
    
    .carousel-slide {
      min-width: 100%;
      position: relative;
    }
    
    .carousel-image {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }
    
    .carousel-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      padding: 20px 15px 15px;
      color: white;
    }
    
    .carousel-indicators {
      position: absolute;
      bottom: 40px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 6px;
    }
    
    .carousel-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: rgba(255,255,255,0.5);
    }
    
    .carousel-dot.active {
      background-color: white;
    }
    
    /* 7. 互动式广告 */
    .ad-interactive {
      padding: 15px;
    }
    
    .interactive-options {
      display: flex;
      gap: 10px;
      margin: 15px 0;
    }
    
    .interactive-option {
      flex: 1;
      padding: 12px 0;
      border: 1px solid #ddd;
      border-radius: 8px;
      text-align: center;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .interactive-option.selected {
      border-color: #2196f3;
      background-color: #e3f2fd;
      color: #2196f3;
      font-weight: 500;
    }
    
    /* 8. 优惠券广告 */
    .ad-coupon {
      position: relative;
      overflow: hidden;
    }
    
    .coupon-content {
      background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
      color: white;
      padding: 15px;
      display: flex;
    }
    
    .coupon-details {
      flex: 1;
    }
    
    .coupon-value {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 5px;
    }
    
    .coupon-desc {
      font-size: 13px;
      opacity: 0.9;
    }
    
    .coupon-expiry {
      font-size: 12px;
      margin-top: 8px;
      opacity: 0.8;
    }
    
    .coupon-divider {
      width: 20px;
      position: relative;
    }
    
    .coupon-divider::before {
      content: '';
      position: absolute;
      top: -20px;
      bottom: -20px;
      left: 10px;
      width: 1px;
      background-color: rgba(255,255,255,0.3);
      transform: rotate(30deg);
    }
    
    .coupon-action {
      width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .coupon-btn {
      background-color: white;
      color: #e91e63;
      border: none;
      border-radius: 4px;
      padding: 6px 10px;
      font-size: 13px;
      font-weight: 600;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-link {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-link.active {
      color: #2196f3;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-white" onclick="history.back()">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">多样化广告展示</h1>
    <div class="text-white">
      <i class="fa fa-share-alt"></i>
    </div>
  </div>
  
  <!-- 广告容器 -->
  <div class="ads-container">
    <!-- 1. 多图网格广告 -->
    <div class="ad-item">
      <div class="ad-creator">
        <img src="https://picsum.photos/100/100?random=1" alt="广告主头像" class="creator-avatar">
        <div class="creator-info">
          <div class="creator-name">环球美食</div>
          <div class="creator-verify">官方认证 · 美食领域</div>
        </div>
        <div class="ad-menu">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-multi-grid">
        <div class="ad-label">广告</div>
        <div class="grid-images">
          <img src="https://picsum.photos/300/300?random=10" alt="美食图片" class="grid-image">
          <img src="https://picsum.photos/300/300?random=11" alt="美食图片" class="grid-image">
          <img src="https://picsum.photos/300/300?random=12" alt="美食图片" class="grid-image">
        </div>
      </div>
      
      <div class="ad-content">
        <div class="ad-title">环球美食节开幕，50+国家特色美食任你尝</div>
        <div class="ad-tags">
          <span class="ad-tag">美食节</span>
          <span class="ad-tag">限时优惠</span>
          <span class="ad-tag">亲子活动</span>
        </div>
        <div class="ad-desc">
          一年一度的环球美食节重磅来袭，汇聚全球50多个国家的特色美食，让你不出国门就能品尝世界味道。
        </div>
        <a href="#" class="ad-cta">立即购票</a>
      </div>
    </div>
    
    <!-- 2. 大图横幅广告 -->
    <div class="ad-item">
      <div class="ad-banner">
        <div class="ad-label">推广</div>
        <img src="https://picsum.photos/800/450?random=20" alt="旅游广告" class="banner-image">
        <div class="banner-content">
          <div class="creator-name" style="color: white; margin-bottom: 5px;">环球旅行</div>
          <div class="banner-title">马尔代夫7日游，限时特惠立减2000元</div>
          <div class="banner-desc">
            包含往返机票+五星级酒店+早餐，享受阳光沙滩和清澈海水，给自己一个完美假期。
          </div>
          <a href="#" class="ad-cta" style="background-color: white; color: #e74c3c;">查看详情</a>
        </div>
      </div>
    </div>
    
    <!-- 3. 左图右文广告 -->
    <div class="ad-item">
      <div class="ad-side-by-side">
        <div class="ad-label" style="top: 15px;">推荐</div>
        <img src="https://picsum.photos/400/600?random=30" alt="电子产品" class="side-image">
        <div class="side-content">
          <div class="creator-name">科技数码馆</div>
          <div class="ad-title">全新无线降噪耳机，音质升级</div>
          <div class="ad-desc">
            主动降噪，续航30小时，IPX4防水，高清通话，多种颜色可选。
          </div>
          <div class="ad-tags">
            <span class="ad-tag">新品上市</span>
            <span class="ad-tag">限时8折</span>
          </div>
          <a href="#" class="ad-cta" style="margin-top: auto;">立即购买</a>
        </div>
      </div>
    </div>
    
    <!-- 4. 纯文字广告 -->
    <div class="ad-item">
      <div class="ad-text-only">
        <div class="ad-label" style="position: static; display: inline-block; margin-bottom: 10px;">广告</div>
        <div class="creator-name">金融服务</div>
        <div class="ad-title">个人信用贷款，最高可贷50万</div>
        <div class="ad-desc">
          无需抵押，快速审批，最快2小时到账。<span class="text-highlight">新用户首次借款享30天免息</span>，随借随还，灵活方便。
        </div>
        <div class="ad-tags">
          <span class="ad-tag">低利率</span>
          <span class="ad-tag">快速到账</span>
          <span class="ad-tag">正规平台</span>
        </div>
        <a href="#" class="ad-cta" style="background-color: #4caf50;">立即申请</a>
      </div>
    </div>
    
    <!-- 5. 视频广告 -->
    <div class="ad-item">
      <div class="ad-creator">
        <img src="https://picsum.photos/100/100?random=5" alt="广告主头像" class="creator-avatar">
        <div class="creator-info">
          <div class="creator-name">运动品牌</div>
          <div class="creator-verify">官方账号 · 运动装备</div>
        </div>
        <div class="ad-menu">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-video">
        <div class="ad-label">广告</div>
        <div class="video-placeholder">
          <div class="play-button">
            <i class="fa fa-play"></i>
          </div>
        </div>
        <div class="video-duration">00:45</div>
      </div>
      
      <div class="ad-content">
        <div class="ad-title">新一代专业跑鞋，轻盈缓震，助力突破</div>
        <div class="ad-desc">
          采用全新缓震科技，重量减轻30%，提供更好的支撑和舒适度，适合长距离跑步。
        </div>
        <a href="#" class="ad-cta">了解更多</a>
      </div>
    </div>
    
    <!-- 6. 轮播广告 -->
    <div class="ad-item">
      <div class="ad-carousel" id="carousel">
        <div class="carousel-track">
          <div class="carousel-slide">
            <img src="https://picsum.photos/800/450?random=40" alt="轮播图1" class="carousel-image">
            <div class="carousel-content">
              <div class="banner-title">夏季服装大促，全场低至3折</div>
              <a href="#" class="ad-cta">立即抢购</a>
            </div>
          </div>
          <div class="carousel-slide">
            <img src="https://picsum.photos/800/450?random=41" alt="轮播图2" class="carousel-image">
            <div class="carousel-content">
              <div class="banner-title">新品上市，首发限量优惠</div>
              <a href="#" class="ad-cta">查看新品</a>
            </div>
          </div>
          <div class="carousel-slide">
            <img src="https://picsum.photos/800/450?random=42" alt="轮播图3" class="carousel-image">
            <div class="carousel-content">
              <div class="banner-title">会员专享，额外9折优惠</div>
              <a href="#" class="ad-cta">成为会员</a>
            </div>
          </div>
        </div>
        
        <div class="carousel-indicators">
          <div class="carousel-dot active"></div>
          <div class="carousel-dot"></div>
          <div class="carousel-dot"></div>
        </div>
        <div class="ad-label">推广</div>
      </div>
    </div>
    
    <!-- 7. 互动式广告 -->
    <div class="ad-item">
      <div class="ad-creator">
        <img src="https://picsum.photos/100/100?random=7" alt="广告主头像" class="creator-avatar">
        <div class="creator-info">
          <div class="creator-name">调研中心</div>
          <div class="creator-verify">官方调研 · 有奖参与</div>
        </div>
        <div class="ad-menu">
          <i class="fa fa-ellipsis-h"></i>
        </div>
      </div>
      
      <div class="ad-interactive">
        <div class="ad-title">参与用户调研，赢取50元购物卡</div>
        <div class="ad-desc">
          我们正在收集用户对新功能的反馈，只需花费2分钟完成以下问题，即可参与抽奖。
        </div>
        
        <div class="ad-desc" style="font-weight: 500;">你更倾向于哪种类型的内容？</div>
        <div class="interactive-options">
          <div class="interactive-option">科技</div>
          <div class="interactive-option">娱乐</div>
          <div class="interactive-option">美食</div>
        </div>
        
        <a href="#" class="ad-cta" style="background-color: #9c27b0;">完成调研</a>
      </div>
    </div>
    
    <!-- 8. 优惠券广告 -->
    <div class="ad-item">
      <div class="ad-coupon">
        <div class="ad-label">优惠</div>
        <div class="coupon-content">
          <div class="coupon-details">
            <div class="coupon-value">¥100</div>
            <div class="coupon-desc">满300元可用</div>
            <div class="coupon-expiry">有效期至：2023-12-31</div>
          </div>
          <div class="coupon-divider"></div>
          <div class="coupon-action">
            <button class="coupon-btn">领取</button>
          </div>
        </div>
        <div class="ad-content" style="padding-top: 10px; padding-bottom: 10px;">
          <div class="ad-desc" style="margin-bottom: 0;">
            适用范围：全场通用，可与其他优惠叠加
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-link">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-link active">
      <i class="fa fa-bullhorn nav-icon"></i>
      <span>广告</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-shopping-cart nav-icon"></i>
      <span>商城</span>
    </a>
    <a href="#" class="nav-link">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 轮播广告功能
    const carousel = document.getElementById('carousel');
    const track = carousel.querySelector('.carousel-track');
    const slides = carousel.querySelectorAll('.carousel-slide');
    const dots = carousel.querySelectorAll('.carousel-dot');
    let currentSlide = 0;
    let slideWidth = slides[0].offsetWidth;
    
    // 设置轮播图宽度
    function setSlidePosition() {
      slideWidth = slides[0].offsetWidth;
      slides.forEach((slide, index) => {
        slide.style.left = slideWidth * index + 'px';
      });
    }
    
    // 移动到指定幻灯片
    function moveToSlide(slideIndex) {
      track.style.transform = 'translateX(-' + (slideWidth * slideIndex) + 'px)';
      
      // 更新指示器
      dots.forEach(dot => dot.classList.remove('active'));
      dots[slideIndex].classList.add('active');
      
      currentSlide = slideIndex;
    }
    
    // 初始化轮播
    setSlidePosition();
    window.addEventListener('resize', setSlidePosition);
    
    // 自动轮播
    setInterval(() => {
      let nextSlide = (currentSlide + 1) % slides.length;
      moveToSlide(nextSlide);
    }, 5000);
    
    // 点击指示器切换幻灯片
    dots.forEach((dot, index) => {
      dot.addEventListener('click', () => {
        moveToSlide(index);
      });
    });
    
    // 互动选项选择功能
    const interactiveOptions = document.querySelectorAll('.interactive-option');
    interactiveOptions.forEach(option => {
      option.addEventListener('click', function() {
        interactiveOptions.forEach(opt => opt.classList.remove('selected'));
        this.classList.add('selected');
      });
    });
    
    // 广告点击事件
    document.querySelectorAll('.ad-item').forEach(ad => {
      ad.addEventListener('click', function(e) {
        // 忽略点击菜单和按钮的情况
        if (!e.target.closest('.ad-menu') && !e.target.closest('.ad-cta') && 
            !e.target.closest('.coupon-btn') && !e.target.closest('.interactive-option')) {
          const adTitle = this.querySelector('.ad-title, .banner-title, .coupon-value')?.textContent || '此广告';
          alert(`查看${adTitle}的详情`);
        }
      });
    });
    
    // 菜单按钮点击事件
    document.querySelectorAll('.ad-menu').forEach(menu => {
      menu.addEventListener('click', function(e) {
        e.stopPropagation();
        alert('广告操作菜单');
      });
    });
    
    // 优惠券领取按钮
    document.querySelector('.coupon-btn').addEventListener('click', function(e) {
      e.stopPropagation();
      this.textContent = '已领取';
      this.style.backgroundColor = '#ccc';
      alert('优惠券领取成功！');
    });
  </script>
</body>
</html>
